<template>
	<view class="square-page">
		<view class="square-list">
			<view class="square-item" v-for="(item,i) of list">
				<view class="square-user-top">
					<view class="user-cont">
						<view class="user-time">{{item.create_time}}</view>
					</view>
				</view>
				<view class="square-cont">
					{{item.content}}
				</view>
				<view class="square-img">
					<view class="imgbox" v-for="(v,index) in item.cover" :key="index">
						<image class="img" :src="v" mode="aspectFill" @click="TanPreviewImage(v)"></image>
					</view>
				</view>
				<view class="set-btn">
					<view class="del" @click="del(item.id)">删除</view>
<!-- 					<view class="edit" @click="edit(item.id)">修改</view> -->
				</view>
			</view>
			<view class="noInfo" v-if="!list.length">
				<i class="Ticonfont Ticon-zanwushuju"></i>
				<span>暂无数据</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [],
				infoData: [{
					imglist: ['/static/images/banner1.jpg', '/static/images/banner2.jpg',
						'/static/images/banner3.jpg', '/static/images/banner4.jpg',
						'/static/images/banner1.jpg', '/static/images/banner2.jpg',
					],
					content: '今天发布了一条招聘信息，有需要的话可以联系下方电话号码，1517023xxxxxx'
				}],

			}
		},
		mounted() {},
		onShow() {},
		onReady() {},
		onLoad() {
			this.getlist();
		},
		methods: {
			getlist() {
				uni.showLoading({
					title: '加载中'
				});
				this.status = 'loading'
				this.$H.post('/user/list_information', this.data).then(res => {
					this.status = 'loadmore'

					uni.hideLoading();

					res.data.list.data.forEach(item => {
						this.list.push(item);
					});
					this.data.page++;
				})
			},
			onReachBottom() {
				this.getlist();
			},
			/**
			 * 图片预览功能
			 * @param url_List 图片预览地址 
			 * @param index 预览的图片的索引 
			 */
			TanPreviewImage(src) {
				uni.previewImage({
					current: 0,
					urls: [src]
				});
			},
			call() {
				let phone = '‭15170232724‬'
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			//删除
			del(id) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '确认删除吗？',
					success: function(res) {
						if (res.confirm) {
							// 用户点击了确定按钮							
							_this.$H.post('/user/del_information', {
								form:{
									id : id
								}
							}).then(res => {
								if (res.status == 200) {
									uni.showToast({
										title: '操作成功',
										icon: 'success'
									});
									setTimeout(() => {
										_this.getlist();
									}, 2000);
								} else {
									uni.showToast({
										title: res.info,
										icon: 'none'
									});
								}
							})

						} else {
							// 执行取消后的操作
						}
					}
				})
			},
			// 修改
			edit() {
				console.log('修改成功');
				uni.showToast({
					icon: 'success',
					title: '修改成功'
				})
			}


		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f1f1f1;
	}



	.square-item {
		margin: 20rpx 0px;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		background: #fff;
		border-bottom: 20rpx solid #f1f1f1;

		.square-user-top {
			display: flex;
			align-items: center;
			padding: 0px 10rpx;

			.user-img {
				width: 70rpx;
				height: 70rpx;
				overflow: hidden;
				border-radius: 50%;
				margin-right: 10rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.user-cont {
				.user-name {
					color: #333;
					font-size: 32rpx;
				}

				.user-time {
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.square-cont {
			padding: 10rpx;
			color: #333;
			font-size: 28rpx;
		}

		.square-img {
			display: flex;
			flex-wrap: wrap;

			.imgbox {
				width: 33.33%;
				height: 200rpx;
				padding: 0px 10rpx;
				box-sizing: border-box;
				margin-bottom: 10rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.shop-foot {
		position: fixed;
		bottom: 0px;
		left: 0px;
		height: 120rpx;
		width: 100%;
		background: #fff;
		padding: 0px 10rpx;
		box-sizing: border-box;

		.btn {
			width: 150rpx;
			height: 100%;
			color: #363636;
			padding: 0px;
			line-height: 28rpx;
			margin: 0px;
			font-size: 24rpx;
			border: 0px !important;
			background: none !important;

			text {
				margin-top: 10rpx;
			}
		}

		button {
			background: none;
			border-bottom: none;
			border-left: none;
			border-radius: 0px;

			&::after {
				border: none;
			}
		}

		.recharge {
			background: rgba(23, 191, 139, 1);
			height: 85rpx;
			line-height: 85rpx;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #fff;
			border-radius: 10rpx;
		}

	}

	.line20 {
		height: 20rpx;
		width: 750rpx;
		background: #f1f1f1;
	}

	.set-btn {
		display: flex;
		justify-content: flex-end;
		width: 750rpx;
		padding: 0px 30rpx;
		padding-top: 10rpx;
		box-sizing: border-box;

		// align-items: center;
		.del {
			color: red;
			margin-right: 20rpx;
			padding: 5px;
			box-sizing: border-box;
			border: 1px solid red;
			border-radius: 10rpx;
		}

		.edit {
			color: rgba(23, 191, 139, 1);
			float: right;
			padding: 5px;
			border: 1px solid rgba(23, 191, 139, 1);
			border-radius: 10rpx;
		}
	}


	.noInfo {
		text-align: center;
		color: #666;
		margin: 50rpx auto;

		.Ticon-zanwushuju {
			font-size: 100rpx;
			color: #666;
			text-align: center;
			display: block;
		}

	}
</style>